<!--
 * @Author: your name
 * @Date: 2021-08-31 17:40:49
 * @LastEditTime: 2021-09-07 16:58:50
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\layouts\userPerfix\setting.vue
-->
<template>
    <Drawer v-bind="getBindProps" width="200" @close="onClose">
        <div :class="['minbg', ...getHeaderClass]">
            <VSilder></VSilder>
        </div>
    </Drawer>
</template>

<script lang="ts">
import { defineComponent, computed, unref } from 'vue'
import { setTrigter } from '../setting/menuTrigger'
import { Drawer } from 'ant-design-vue'
import VSilder from './silder.vue'
import { SetTheme } from '@/setting/theme'

export default defineComponent({
    name: 'Setting',
    components: { Drawer, VSilder },
    setup() {
        let { menuTriggers } = setTrigter()
        const getBindProps = computed(() => {
            const status = unref(menuTriggers)
            return {
                visible: unref(!status),
                placement: 'left',
                closable: false,
                bodyStyle: {
                    padding: 0,
                },
            }
        })
        const onClose = () => {
            setTrigter()
        }
        let { themeColors } = SetTheme()
        const getHeaderClass = computed(() => {
            const theme = unref(themeColors)
            return [`primary-${theme}-color`]
        })
        return {
            getBindProps,
            getHeaderClass,
            onClose,
        }
    },
})
</script>

<style lang="less" scoped>
@import "../styles/commit.less";
.minbg {
  width: 100%;
  height: 100vh;
}
</style>
